<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:settings="{ formData }">
        <div class="item-box"  style="line-height: 1.5;">
          <p class="item-title">页面链接</p>
          <a class="item-link" :href="formData.pageHref" target="_blank">{{formData.pageHref}}</a> <i v-clipboard:copy="formData.pageHref" class="icons el-icon-document"></i>
        </div>
        <div class="item-box">
          <p class="item-title">SEO标题</p>
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
              v-model="formData.seoTitle">
          </el-input>
          <p class="item-tips">标题是SEO最重要的部分，该标题会显示在搜索引擎的搜索结果中。</p>
        </div>
        <div class="item-box">
          <p class="item-title">SEO描述</p>
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
              v-model="formData.seoDesc">
          </el-input>
          <p class="item-tips">这是该页面的 SEO 描述，可以添加一些描述，使页面在搜索引擎中获得更高的排名。</p>
        </div>
        <div class="item-box">
          <p class="item-title">SEO关键词</p>
          <el-select
              style="width: 100%"
              v-model="formData.seoKeywords"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="回车确认，可添加多个">
            <el-option v-for="item in seoKeywordsList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
<!--          <seo-keywords v-model="formData.seoKeywords" />-->
          <p class="item-tips">输入enter添加关键词</p>
        </div>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="setData">
          <svg-icon icon-class="reset-settings"></svg-icon>
          保存
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import {debounce, deepClone} from '@/utils/utils';
// import seoKeywords from './SEOkeywords';
// import SelectWithTips from '@/components/CheckoutMenu/select-with-tips';
export default {
    name: 'footerSettings',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        formData: {
            handler (newVal, oldVal) {
                this.setData();
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            seoKeywordsList: [],
            pageCount: 0,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            sections: [
                {
                    title: '编辑SEO',
                    formDesc: {
                        settings: {}
                    }
                }
            ]

        };
    },
    methods: {
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    components: {
    },
    mounted () {

    }
};
</script>

<style scoped lang="scss">
.item-box{
  position: relative;
  .item-title{
    font-size: 14px;
    color: #212121;
    white-space: pre-wrap;
    margin-bottom: 10px;
  }
  .item-link{
    color: #1f7df8;
  }
  .item-tips{
    color: rgba(0, 0, 0, 0.45);
    min-height: 19px;
    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    line-height: 1.5;
  }
  .charts-count{
    position: absolute;
    top: 59px;
    right: 0;
    width: 50px;
    height: 30px;
    line-height: 30px;
    color: rgb(157, 164, 178);
    font-size: 12px;
  }
  .icons{
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #1f7df8;
  }
}
</style>
